<template>
  <!-- 运营管理-模板选择 -->
  <div class="editeCourse" >
    <div class="content-popup">
      <div class="box-basicInfo">
        <span class="title-c">基本信息</span>
        <div class="box-form">
          <el-form
                :model="basicInfo.ruleForm"
                ref="basicInfo-ruleForm"
                label-width="1.6rem"
                class="ruleForm"
              >
             <el-form-item class="is-required" label="课程名称">
                <el-input placeholder="请输入课程名称" v-model="basicInfo.ruleForm.schoolName"></el-input>
              </el-form-item>
              <el-form-item class="is-required" label="课程原价" >
                <el-input placeholder="请输入原价" v-model="basicInfo.ruleForm.schoolAddress"></el-input>
              </el-form-item>
              <el-form-item class="is-required" label="课程现价" >
                <el-input placeholder="请输入现价" v-model="basicInfo.ruleForm.schoolTel"></el-input>
              </el-form-item>
              <el-form-item class="is-required" label="课程首图" >
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="basicInfo_handlePictureCardPreview"
                  :on-remove="basicInfo_handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="basicInfo.ruleForm.dialogVisible">
                  <img width="100%" :src="basicInfo.ruleForm.dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
              <el-form-item class="is-required" label="课程类型" >
                <el-input placeholder="请输入课程类型" v-model="basicInfo.ruleForm.schoolTel"></el-input>
              </el-form-item>
              <el-form-item class="is-required" label="孩子年龄" >
                <el-input placeholder="数字" v-model="basicInfo.ruleForm.schoolTel"></el-input>
                至
                <el-input placeholder="数字" v-model="basicInfo.ruleForm.schoolTel"></el-input>
                岁
              </el-form-item>
              <el-form-item class="is-required" label="是否有试听" >
                <template>
                  <el-radio v-model="basicInfo.ruleForm.isAudition" label="1">是</el-radio>
                  <el-radio v-model="basicInfo.ruleForm.isAudition" label="0">否</el-radio>
                </template>
              </el-form-item>
              <el-form-item class="is-required" label="上课时间段" >
                 <template>
                  <el-radio v-model="basicInfo.ruleForm.courseTimeRange" label="1">平日晚上及周末</el-radio>
                  <el-radio v-model="basicInfo.ruleForm.courseTimeRange" label="2">周末</el-radio>
                  <el-radio v-model="basicInfo.ruleForm.courseTimeRange" label="3">平日晚上</el-radio>
                </template>
              </el-form-item>
              <el-form-item class="is-required" label="课时总数" >
                <el-input placeholder="数字" v-model="basicInfo.ruleForm.schoolTel"></el-input>
                课时
              </el-form-item>
               <el-form-item class="is-required" label="单次时长" >
                <el-input placeholder="请输入单次时长" v-model="basicInfo.ruleForm.schoolTel"></el-input>
                分钟
              </el-form-item>
            </el-form>
        </div>
      </div>
      <div class="box-detailInfo">
        <span class="title-c">详细信息</span>
        <div class="box-richtxt">
          <keep-alive>
              <editor ref="detailInfoEditor" 
                  id="detailInfoeditor" 
                  v-bind:r_content="'<p><strong>初始值测试-detailInfo</strong></p>'"
                  :hight="500">
              </editor>
            </keep-alive>
        </div>
      </div>
      <div class="box-bottomBtn">
        <el-button class="cancel" type="primary" >取消</el-button>
        <el-button class="ok" type="primary" >保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import editor from '@/components/common/editor'
export default {
  components:{editor},
  props:['editeCourse'],
  data() {
    return {
      parentData:this.editeCourse,
      basicInfo:{
        ruleForm: {
          schoolName: "",
          schoolAddress: "",
          schoolTel: "",
          promotion:'',
          dialogImageUrl: '',
          dialogVisible: false,
          isAudition:'1',
          courseTimeRange:'1',
        },
      },
    };
  },
  methods: {
    init(){
      let user=JSON.parse(tool.getItem(window.lsKey.user));
    },
    campusChange : function(campusId) { //校区改变
      this.init();
    },
    basicInfo_handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    basicInfo_handlePictureCardPreview(file) {
      this.basicInfo.ruleForm.dialogImageUrl = file.url;
      this.basicInfo.ruleForm.dialogVisible = true;
    },
  },
  mounted() {
	  this.init();
  },
  computed: {},
  watch: {},
  created: function() {}
};
</script>

<style lang="scss">
.editeCourse {
  .content-popup {
    padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.16rem;
    .title-c{
      font-weight: bold;
      font-size: 0.2rem;
      margin: 0.16rem 0;
      display: inline-block;
    }
    .box-basicInfo{
      .el-input{
        width: 3rem !important;
      }
    }
    .box-detailInfo{

    }
  }
  // 滚动条
  .scrollbarstyle::-webkit-scrollbar {
    width: 0.05rem;
    height: 0.1rem;
  }
  .scrollbarstyle::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background: #BBBBBB;
  }
  .scrollbarstyle::-webkit-scrollbar-track {
    background: #F2F6FC;
  }
}
.ow_editeCoursePopup{
  top: 0.81rem !important;
  left: 2.1rem !important;
  background-color: rgba(0,0,0,0.3);
  .el-dialog{
    width: 12.2rem;
    .el-dialog__header{
      text-align: center;
    }
    .el-dialog__title{
      font-size: 0.25rem;
      font-weight: bold;
      color: #333333;
      
    }
    .el-dialog__headerbtn{
      font-size: 0.25rem !important;
    }
  }
}
</style>